<template>
  <div>
    <div>
      <el-card style="margin-bottom: 10px">
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          "
        >
          <div>
            <div class="verticalBar"></div>
            <span style="color: #1074fd">素材管理</span>
          </div>
        </div>
      </el-card>
    </div>
    <div>
      <el-card>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="简介名称">
            <el-input
              placeholder="请输入"
              v-model="filterCondition.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="任务状态" label-width="100px">
            <el-select v-model="filterCondition.status" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-date-picker
            v-model="filterCondition.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="ml-16"
          >
          </el-date-picker>
        </el-form>
        <el-button type="primary" @click="generateMaterial = true"
          >生成素材</el-button
        >
        <el-button class="ml-96" type="primary" @click="filterMaterial"
          >查询</el-button
        >
        <el-button class="" type="info">清空条件</el-button>
      </el-card>
    </div>
    <div class="mt-2">
      <el-card>
        <el-table
          :data="
            materialTableData.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          "
          border
          stripe
          style="width: 100%"
        >
          <el-table-column prop="id" label="ID" width="180"> </el-table-column>
          <el-table-column prop="name" label="素材名称" width="180">
          </el-table-column>
          <el-table-column prop="status" label="任务状态"> </el-table-column>
          <el-table-column prop="createTime" label="合成时间">
          </el-table-column>
          <el-table-column prop="operations" label="操作">
            <template slot-scope="scope">
              <div class="text-center">
                <el-button
                  type="primary"
                  size="mini"
                  @click="
                    promptBoxShow();
                    materialDetail(scope);
                  "
                  >查看</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  @click="generateMaterial = true"
                  >修改</el-button
                >
                <el-button type="danger" size="mini" @click="delMaterial(scope)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="text-center mt-2">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pagesize"
            @current-change="current_change"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <el-dialog
      :visible.sync="promptBox"
      width="40%"
      style="width: 2000px"
      class="rounded"
    >
      <div>
        <el-card style="margin-bottom: 10px">
          <div
            style="
              display: flex;
              flex-direction: row;
              justify-content: space-between;
            "
          >
            <div>
              <div class="verticalBar"></div>
              <span style="color: #1074fd">素材查看</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="middle_div ml-10 yuansu" style="height: 800px">
        <span>素材名称：</span>
        <el-input
          v-model="materialNameById"
          placeholder="请输入内容"
          style="width: 400px"
        ></el-input>
        <div class="space-y-0.5 ml-10">
          <span>长尾词</span>
          <div
            class="border-solid border-2 h-40 rounded overflow-y-scroll hh"
          >
            {{ materialWordById.join(' | ') }}
          </div>
          <span>视频</span>
          <div
            class="
              border-solid border-2
              rounded
              grid grid-cols-6 grid-rows-2
              justify-between
              tt
            "
          >
            <video
              v-for="(item, index) in materialVideoById"
              :src="item"
              :key="index"
              controls
              muted

              class="object-fill w-24 h-24 rounded-md border-gray-300 border-2"
            ></video>
          </div>
          <span>图片</span>
          <div
            class="
              border-solid border-2
              rounded
              grid grid-cols-6 grid-rows-2
              justify-between
              ss
            "
          >
            <img
              v-for="item in materialImgById"
              :src="item"
              :key="item"
              class="object-fill w-24 h-24 rounded-md border-gray-300 border-2"
            />
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="generateMaterial"
      width="40%"
      style="width: 2000px"
      class="rounded"
    >
      <div>
        <el-card style="margin-bottom: 10px">
          <div
            style="
              display: flex;
              flex-direction: row;
              justify-content: space-between;
            "
          >
            <div>
              <div class="verticalBar"></div>
              <span style="color: #1074fd">素材合成</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="middle_div ml-10">
        <span>素材名称：</span>
        <el-input
          v-model="materialName"
          placeholder="请输入内容"
          style="width: 400px"
        ></el-input>
        <div class="mt-6">
          <span>选择长尾词 已选{{ tailSelection }}个</span>
          <el-table
            border
            ref="multipleTable"
            :data="tailwordTableData"
            height="175px"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChangeTail"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="id" width="120">
            </el-table-column>
            <el-table-column prop="introduce" label="简介名称" width="120">
            </el-table-column>
            <el-table-column prop="content" label="内容" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
        
        <div class="mt-6">
          <span>选择视频 已选{{ videoSelection }}个</span>
          <div>
          <el-radio v-model="radio" label="1" @change="synthesisVideo" style="margin-left: 20px">选择合成视频库</el-radio>
          <el-radio v-model="radio" label="2" @change="customVideo">选择自定义视频库</el-radio>
          </div>
          <el-table
            border
            v-if="isVideoLibrary"
            ref="videoMultipleTable"
            :data="videoTableData"
            tooltip-effect="dark"
            height="175px"
            style="width: 100%"
            @selection-change="handleSelectionChangeVideo"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="id" width="120">
            </el-table-column>
            <el-table-column prop="name" label="简介名称" width="120">
            </el-table-column>
            <el-table-column prop="content" label="内容" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>

        <div class="mt-6">
          <span>选择图片 已选{{ imgSelection }}个</span>
          <el-table
            border
            ref="imgMultipleTable"
            :data="imgTableData"
            height="175px"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChangeImg"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="id" width="120">
            </el-table-column>
            <el-table-column prop="name" label="简介名称" width="120">
            </el-table-column>
            <el-table-column prop="url" label="内容" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
        <div class="mt-6" style="padding: 0 0 20px 0;">
          <el-button type="primary" @click="addMaterial">提交素材</el-button>
          <el-button type="primary" @click="generateMaterial = false"
            >取消</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import video from "@/network/api/video";

export default {
  data() {
    return {
      options: [
        {
          value: "0",
          label: "合成中",
        },
        {
          value: "1",
          label: "已合成",
        },
        {
          value: "2",
          label: "合成失败",
        },
      ],
      materialTableData: [],
      tailwordTableData: [],
      imgTableData: [],
      videoTableData: [],
      materialNameById: "",
      materialVideoById: [],
      materialWordById: [],
      materialImgById: [],
      materialName: "",
      longWordIds: [],
      videoIds: [],
      imgIds: [],
      generateMaterial: false,
      tailSelection: 0,
      imgSelection: 0,
      videoSelection: 0,
      filterCondition: {
        name: "",
        status: "",
        time: "",
      },

      pagesize: 10,
      currentPage: 1,
      total: 0,
      promptBox: false,
      tableData: [],
      radio: '2',
      isVideoLibrary: false
    };
  },
  methods: {
    promptBoxShow() {
      this.promptBox = true;
    },

    queryLongWordList() {
      const info = JSON.parse(localStorage.getItem("updateUserInfo"));
      const data = {
        organId: info.organId,
      };
      video.queryLongWordList(data).then((res) => {
        res.data.data.forEach((item) => {
          if (item.enabled === "1") {
            this.tailwordTableData.push(item);
          }
        });
      });
    },

    queryImgList() {
      const info = JSON.parse(localStorage.getItem("updateUserInfo"));
      const data = {
        organId: info.organId,
      };
      video.queryImgList(data).then((res) => {
        res.data.data.forEach((item) => {
          this.imgTableData.push(item);
        });
      });
    },

    queryVideoList() {
      const info = JSON.parse(localStorage.getItem("updateUserInfo"));
      const data = {
        organId: info.organId,
      };
      video.queryVideoList(data).then((res) => {
        console.log(res.data.data);
        res.data.data.forEach((item) => {
          this.videoTableData.push(item);
        });
      });
    },

    current_change(currentPage) {
      this.currentPage = currentPage;
    },

    handleSelectionChangeTail(rows) {
      rows.forEach((row) => {
        this.longWordIds.push(row.id);
      });
    },

    handleSelectionChangeVideo(rows) {
      this.videoSelection = rows.length;
      if (this.imgSelection > 0) {
        rows.forEach((row) => {
          this.$refs.imgMultipleTable.clearSelection();
        });
      }
      rows.forEach((row) => {
        this.videoIds.push(row.id);
      });
    },

    handleSelectionChangeImg(rows) {
      this.imgSelection = rows.length;
      if (this.videoSelection > 0) {
        rows.forEach((row) => {
          this.$refs.videoMultipleTable.clearSelection();
        });
      }
      rows.forEach((row) => {
        this.imgIds.push(row.id);
      });
    },

    addMaterial() {
      this.generateMaterial = false;
      const info = JSON.parse(localStorage.getItem("updateUserInfo"));
      let longWordIds = Array.from(new Set(this.longWordIds));
      let videoIds = Array.from(new Set(this.videoIds));
      let imgIds = Array.from(new Set(this.imgIds));
      console.log(videoIds);
      console.log(imgIds);
      if (this.radio == 2) {
        var data = {
          organId: info.organId,
          name: this.materialName,
          status: "",
          longWordIds: longWordIds,
          videoIds: videoIds,
          imgIds: imgIds,
          isCustom: true
        };
      } else {
        var data = {
          organId: info.organId,
          name: this.materialName,
          status: "",
          longWordIds: longWordIds,
          videoIds: videoIds,
          imgIds: imgIds,
          isCustom: false
        };
      }

      if (videoIds.length == 0 && imgIds.length == 0 && data.isCustom == false) {
        this.$message.error('图片跟视频必须选择其中一个');
      } else {
        video.addMaterial(data).then((res) => {
          console.log(res);
        });
      }
    },

    queryMaterial() {
      const info = JSON.parse(localStorage.getItem("updateUserInfo"));
      const data = {
        organId: info.organId,
        name: this.materialName,
        status: "",
        startTime: "",
        endTime: "",
        pageSize: 100,
        pageNum: 1,
      };
      video.queryMaterial(data).then((res) => {
        this.total = res.data.data.records.length;
        res.data.data.records.forEach((item) => {
          if (item.status === "0") {
            item.status = "合成中";
          }
          if (item.status === "1") {
            item.status = "已合成";
          }
          if (item.status === "2") {
            item.status = "合成失败";
          }
          this.materialTableData.unshift(item);
        });
      });
    },

    materialDetail(scope) {
      console.log(scope);
      const data = {
        id: scope.row.id + "",
      };
      video.queryMaterialById(data, scope.row.id).then((res) => {
        console.log(res);
        this.materialNameById = res.data.data.name;
        console.log(res.data.data.videos);
        this.materialVideoById = res.data.data.videos
        this.materialImgById = res.data.data.imgs
        this.materialWordById = res.data.data.longWords
      });
    },
    delMaterial(scope) {
      const data = {
        id: scope.row.id,
        deleted: "1",
      };
      video.delMaterial(data).then((res) => {
        console.log(res);
      });
    },
    filterMaterial() {
      const info = JSON.parse(localStorage.getItem("updateUserInfo"));
      const data = {
        organId: info.organId,
        name: this.filterCondition.name,
        status: this.filterCondition.status + "",
        startTime: "",
        endTime: "",
        pageSize: 100,
        pageNum: 1,
      };
      video.queryMaterial(data).then((res) => {
        this.materialTableData = [];
        res.data.data.records.forEach((item) => {
          if (item.status === "0") {
            item.status = "合成中";
          }
          if (item.status === "1") {
            item.status = "已合成";
          }
          if (item.status === "2") {
            item.status = "合成失败";
          }
          this.materialTableData.unshift(item);
        });
      });
    },

    synthesisVideo() {
      this.isVideoLibrary = true
    },

    customVideo() {
      this.isVideoLibrary = false
    }

  },
  mounted() {
    this.queryLongWordList();
    this.queryImgList();
    this.queryVideoList();
    this.queryMaterial();
  },
};
</script>

<style scoped>
.verticalBar {
  width: 3px;
  height: 18px;
  background: #1074fd;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  margin-top: 2px;
}

/deep/ .el-date-editor .el-range-separator {
  padding: 0;
}

/deep/ .el-dialog__body {
  padding: 0;
}

/deep/ .el-card__body {
  padding: 13px;
}

/deep/ .el-dialog__header {
  padding: 0;
}

.ml-96 {
  margin-left: 48rem;
}

.hh {
  margin-bottom: 10px;
  margin-left: 1rem;
  width: 38rem;
  height: 160px;
  overflow: hidden;
  overflow-y: scroll;
}

.tt {
  margin-bottom: 10px;
  margin-left: -2rem;
  width: 44rem;
  height: 192px;
  overflow: hidden;
  overflow-y: scroll;
}

.ss {
  margin-bottom: 10px;
  margin-left: -2rem;
  width: 44rem;
  height: 192px;
  overflow: hidden;
  overflow-y: scroll;
}

.yuansu span {
  display: block;
  margin: 10px 0 10px 0;
}

.grid-rows-2 {
  grid-template-rows: none;
}
</style>
